<template>
  <z-paging ref="paging" safe-area-inset-bottom use-safe-area-placeholder v-model="dataList" @query="queryList">
    <search v-model="query.keyWord" placeholder="搜索" :readonly="false" slot="top" @confirm="resetQuery"/>
    <view class="list">
      <view class="item" v-for="(item,index) in dataList" :key="index" @click="toDetail(item)">
        <c-image :src="item.image" loadingIcon="icon" mode="aspectFill"/>
        <view class="name">{{item.name}}</view>
      </view>
    </view>
  </z-paging>
</template>

<script>
import {getGoodsList} from "@/api/goods";
export default {
  data() {
    return {
      dataList: [], // 列表数据
      query: {
        categoryId: '',
        chooseItemId: '',
        keyWord: ''
      } // 查询条件
    };
  },
  computed: {
  },
  methods: {
    queryList(pageNo, pageSize) {
      this.query = {
        ...this.query,
        pageNum: pageNo,
        pageSize
      }
      getGoodsList(this.query).then(res => {
        this.$refs.paging.completeByTotal(res.records || [], res.total);
      }).catch(e => {
        this.$refs.paging.complete([]);
      })
    },
    resetQuery() {
      this.$refs.paging.reload()
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/goods/detail?id=${item.id}&type=${this.query.type}`
      });
    }
  },
  onLoad(options) {
    this.query = {
      ...this.query,
      ...options
    }
  }
}
</script>

<style lang="scss">
.list {
  padding: 0 10rpx;
  .item {
    height: 400rpx;
    border-radius: 16rpx;
    overflow: hidden;
    position: relative;
    margin-top: 20rpx;
    .name {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 28rpx;
      background: rgba(0,0,0,.3);
      color: #fff;
      padding: 16rpx 20rpx;
    }
  }
}
</style>
